<template>
  <div class="docker">
    <router-link :to="item.path"
      v-for="item in dockerList"
      :key="item.id"
      :class="{'docker__item': true, 'docker__item--active': checkedDocker === item.id? true: false}"
      @click="() => changeDocker(item.id)">
      <div class="iconfont" v-html='item.icon'></div>
      <div class="docker__title">{{item.text}}</div>
    </router-link>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
const dockerList = [
  { id: 0, icon: '&#xe62e;', text: '首页', path: '/home' },
  { id: 1, icon: '&#xe63f;', text: '购物车', path: '/cart' },
  { id: 2, icon: '&#xe897;', text: '订单', path: '/order' },
  { id: 3, icon: '&#xe75e;', text: '我的', path: '/mine' }
]
export default {
  name: 'Docker',
  setup () {
    const checkedDocker = ref(0)
    const changeDocker = (id) => {
      checkedDocker.value = id
      // router.push(item.path)
    }
    const route = useRoute()
    // 侦听路由变化 切换 tabBar 栏
    watch(
      () => {
        dockerList.forEach(item => {
          if (item.path === route.path) {
            changeDocker(item.id)
          }
        })
      }
    )
    return { dockerList, checkedDocker, changeDocker }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriales.scss';

.docker {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  height: 0.49rem;
  padding: 0 0.18rem;
  border-top: 0.01rem solid #f1f1f1;
  background: $content-fontcolor;
  &__item {
    flex: 1;
    text-align: center;
    color: #000;
    text-decoration: none;
    .iconfont {
      margin: 0.1rem 0 0.03rem 0;
      font-size: 0.18rem;
    }
    &--active {
      color: red;
    }
  }
  &__title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>
